<style scoped lang="less">
	.spin-icon-load {
		animation: ani-demo-spin 1s linear infinite;
	}
	
	@keyframes ani-demo-spin {
		from {
			transform: rotate(0deg);
		}
		50% {
			transform: rotate(180deg);
		}
		to {
			transform: rotate(360deg);
		}
	}
	
	.spin-col {
		height: 100px;
		position: relative;
		border: 1px solid #eee;
		
	}
	
	.content-wrapper {
		width: 100%;
		height: 100%;
		.site-list {
			background-color: #FFF;
			box-shadow: 0 2px 7px rgba(0, 0, 0, .15);
			border-color: transparent;
			margin-bottom: 15px;
			.setting {
				width: 100%;
				height: auto;
				display: block;
			}
		}
		.settingconf {
			padding: 15px 0 0 0;
			width: 100%;
		}
		.table-title {
			padding: 10px;
			border-bottom: 1px solid #E7F1F3;
			background-color: #F4F5F5;
			.title {
				color: #323437;
				font-weight: 700;
				font-size: 14px;
				display: inline-block;
			}
			.setting {
				width: 22px;
				height: 22px;
				line-height: 22px;
				float: right;
				display: inline-block;
				margin-right: 5px;
				cursor: pointer;
				.setting-from {
					position: absolute;
					top: 0;
					left: 0;
					z-index: 8;
					width: 100%;
					height: 100%;
					background-color: rgba(255, 255, 255, .9);
				}
			}
		}
		.line {
			width: 100%;
			position: relative;
			padding: 10px 10px 0 10px;
			.error {}
		}
	}
</style>
<template>
	<div class="content-wrapper">
		<Row justify="space-between" type="flex">
			<Col span="19" class="spin-col">
			<Row justify="space-between" type="flex">
				<Col span="11" style="width:49%;">
				<div class="setting site-list" style="height: 350px;overflow: hidden;">
					<div class="table-title">
						<div class="title">
							七牛云存储
						</div>
						<div class="setting" v-if="settingStatus.qiniu.setting.testing && settingStatus.qiniu.setting.install">
							<Poptip confirm placement="bottom-end" title="您确认卸载七牛云存储吗？" width="200" @on-ok="remove('qiniu')">
								<Icon type="ios-trash-outline" size="25"></Icon>
							</Poptip>
						</div>
					</div>
					<div class="line">
						<Spin fix v-if="settingStatus.qiniu.loding">
							<Icon type="load-c" size=18 class="spin-icon-load"></Icon>
							<div>Loading</div>
						</Spin>

						<div class="error" style="padding-top: 80px;" v-if="!settingStatus.qiniu.install">
							<Spin style="color:#5c6b77;">
								<Icon type="ios-information-outline" size="40"></Icon>
								<div style="padding:15px 0;font-size:15px;">你当前还没有安装七牛云存储，请先安装！</div>
								<div>
									<Button type="dashed" :loading="settingStatus.qiniu.installing" icon="ios-cloud-outline" @click="install('qiniu');">
								        <span v-if="!settingStatus.qiniu.installing">立即安装</span>
								        <span v-else>正在安装七牛云存储</span>
								   </Button>
								</div>
							</Spin>
						</div>

						<div class="setting-from" style="padding-top:60px;" v-if="settingStatus.qiniu.install">
							<div class="">

								<Form ref="settingStatus.qiniu" :model="settingStatus.qiniu.setting" :rules="qiniu_ruleValidate" :label-width="90">
									<Row justify="space-around" type="flex">
										<Col span="10">
										<FormItem label="accessKey" prop="accessKey">
											<Input type="password" v-model="settingStatus.qiniu.setting.accessKey" placeholder="请输入accessKey"></Input>
										</FormItem>
										</Col>
										<Col span="1" style="line-height: 40px;">
										<Poptip content="https://portal.qiniu.com/user/key" placement="right">
											<Icon type="ios-help-outline" size="20"></Icon>
											<div slot="title">七牛云存储 [accessKey]</div>
											<div slot="content">
												点击：
												<a href="https://portal.qiniu.com/user/key" target="_blank">https://portal.qiniu.com/user/key</a> 获取
											</div>
										</Poptip>
										</Col>
										<Col span="10">
										<FormItem label="secretKey" prop="secretKey">
											<Input type="password" v-model="settingStatus.qiniu.setting.secretKey" placeholder="请输入secretKey"></Input>
										</FormItem>
										</Col>
										<Col span="1" style="line-height: 40px;">
										<Poptip content="https://portal.qiniu.com/user/key" placement="right">
											<Icon type="ios-help-outline" size="20"></Icon>
											<div slot="title">七牛云存储 [secretKey]</div>
											<div slot="content">
												点击：
												<a href="https://portal.qiniu.com/user/key" target="_blank">https://portal.qiniu.com/user/key</a> 获取
											</div>
										</Poptip>
										</Col>
									</Row>

									<Row justify="space-around" type="flex">
										<Col span="10">
										<FormItem label="空间名称" prop="bucketName">
											<Input v-model="settingStatus.qiniu.setting.bucketName" placeholder="请输入空间名称"></Input>
										</FormItem>
										</Col>
										<Col span="1" style="line-height: 40px;">
										<Poptip content="https://portal.qiniu.com/user/key" placement="right">
											<Icon type="ios-help-outline" size="20"></Icon>
											<div slot="title">七牛云存储 [bucketName]</div>
											<div slot="content">
												点击：
												<a href="https://portal.qiniu.com/bucket/tomato/index" target="_blank">https://portal.qiniu.com/bucket/tomato/index</a> 获取
											</div>
										</Poptip>
										</Col>
										<Col span="10">
										<FormItem label="外链域名" prop="apiUri">
											<Input v-model="settingStatus.qiniu.setting.apiUri" placeholder="请输入外链域名"></Input>
										</FormItem>
										</Col>
										<Col span="1" style="line-height: 40px;">
										<Poptip content="https://portal.qiniu.com/user/key" placement="right">
											<Icon type="ios-help-outline" size="20"></Icon>
											<div slot="title">七牛云存储 [外链域名]</div>
											<div slot="content">
												请注意！<br/>请加上协议：http:// or https://,<br/>并且末尾要加 " / "
											</div>
										</Poptip>
										</Col>
									</Row>

									<Row justify="space-around" type="flex">
										<Col span="12">
										<FormItem label="启用" prop="status">
											<i-switch :disabled="!(settingStatus.qiniu.setting.testing && settingStatus.qiniu.setting.install)" v-model="settingStatus.qiniu.setting.status" size="large" @on-change="qiniuStatusChange">
												<span slot="open">开启</span>
												<span slot="close">关闭</span>
											</i-switch>

										</FormItem>
										</Col>
										<Col span="12">
										<FormItem>
											<Button type="primary" icon="paper-airplane" @click="settingSubmit('settingStatus.qiniu','qiniu')">保存并测试</Button>
										</FormItem>
										</Col>
									</Row>
								</Form>
							</div>
						</div>
					</div>
				</div>
				</Col>
				<Col span="11" style="width:49%;" class="spin-col">
				<div class="setting site-list" style="height: 350px;overflow: hidden;">
					<div class="table-title">
						<div class="title">
							又拍云存储
						</div>
						<div class="setting" v-if="settingStatus.upyun.setting.testing && settingStatus.upyun.setting.install">
							<Poptip confirm placement="bottom-end" title="您确认卸载七牛云存储吗？" width="200" @on-ok="remove('upyun')">
								<Icon type="ios-trash-outline" size="25"></Icon>
							</Poptip>
						</div>
					</div>
					<div class="line">
						<Spin fix v-if="settingStatus.upyun.loding">
							<Icon type="load-c" size=18 class="spin-icon-load"></Icon>
							<div>Loading</div>
						</Spin>

						<div class="error" style="padding-top: 80px;" v-if="!settingStatus.upyun.install">
							<Spin style="color:#5c6b77;">
								<Icon type="ios-information-outline" size="40"></Icon>
								<div style="padding:15px 0;font-size:15px;">你当前还没有安装又拍云存储，请先安装！</div>
								<div>
									<Button type="dashed" :loading="settingStatus.upyun.installing" icon="ios-cloud-outline" @click="install('upyun');">
								        <span v-if="!settingStatus.upyun.installing">立即安装</span>
								        <span v-else>正在安装又拍云存储</span>
								   </Button>
								</div>
							</Spin>
						</div>

						<div class="setting-from" style="padding-top:45px;" v-if="settingStatus.upyun.install">
							<div class="">

								<Form ref="settingStatus.upyun" :model="settingStatus.upyun.setting" :rules="upyun_ruleValidate" :label-width="90">
									<Row justify="space-around" type="flex">
										<Col span="10">
										<FormItem label="操作员名称" prop="OperatorName">
											<Input type="password" v-model="settingStatus.upyun.setting.OperatorName" placeholder="请输入操作员名称"></Input>
										</FormItem>
										</Col>
										<Col span="1" style="line-height: 40px;">
										<Poptip content="https://console.upyun.com/services/{空间名称（bucket）}/sourceFile/" placement="right">
											<Icon type="ios-help-outline" size="20"></Icon>
											<div slot="title">又拍云存储 [OperatorName]</div>
											<div slot="content">
												点击：<br/>
												<a href="https://console.upyun.com/services/{空间名称（bucket）}/sourceFile/" target="_blank">https://console.upyun.com/services/{空间名称（bucket）}/sourceFile/</a> 后，<br/>下方有一个“操作员授权”栏目，选择一个操作员
											</div>
										</Poptip>
										</Col>
										<Col span="10">
										<FormItem label="操作员密码" prop="OperatorPwd">
											<Input type="password" v-model="settingStatus.upyun.setting.OperatorPwd" placeholder="请输入操作员密码"></Input>
										</FormItem>
										</Col>
										<Col span="1" style="line-height: 40px;">
										<Poptip content="https://console.upyun.com/account/operators/" placement="right">
											<Icon type="ios-help-outline" size="20"></Icon>
											<div slot="title">又拍云存储 [OperatorPwd]</div>
											<div slot="content">
												点击：
												<a href="https://console.upyun.com/account/operators/" target="_blank">https://console.upyun.com/account/operators/</a> 获取
											</div>
										</Poptip>
										</Col>
									</Row>

									<Row justify="space-around" type="flex">
										<Col span="10">
										<FormItem label="空间名称" prop="ServiceName">
											<Input v-model="settingStatus.upyun.setting.ServiceName" placeholder="请输入空间名称（bucket）"></Input>
										</FormItem>
										</Col>
										<Col span="1" style="line-height: 40px;">
										<Poptip content="https://console.upyun.com/services/file/" placement="right">
											<Icon type="ios-help-outline" size="20"></Icon>
											<div slot="title">又拍云存储 [bucketName]</div>
											<div slot="content">
												点击：
												<a href="https://console.upyun.com/services/file/" target="_blank">https://console.upyun.com/services/file/</a> 获取
											</div>
										</Poptip>
										</Col>
										<Col span="10">
										<FormItem label="外链域名" prop="apiUri">
											<Input v-model="settingStatus.upyun.setting.apiUri" placeholder="请输入外链域名"></Input>
										</FormItem>
										</Col>
										<Col span="1" style="line-height: 40px;">
										<Poptip content="https://portal.qiniu.com/user/key" placement="right">
											<Icon type="ios-help-outline" size="20"></Icon>
											<div slot="title">七牛云存储 [外链域名]</div>
											<div slot="content">
												请输入你绑定的加速域名！<br /> 请注意！
												<br/>请加上协议：http:// or https://,<br/>并且末尾要加 " / "
											</div>
										</Poptip>
										</Col>
									</Row>

									<Row justify="space-around" type="flex">
										<Col span="10">
										<FormItem label="api_key" prop="api_key">
											<Input type="password" v-model="settingStatus.upyun.setting.api_key" placeholder="请输入api_key"></Input>
										</FormItem>
										</Col>
										<Col span="1" style="line-height: 40px;">
										<Poptip content="https://portal.qiniu.com/user/key" placement="right">
											<Icon type="ios-help-outline" size="20"></Icon>
											<div slot="title">七牛云存储 [bucketName]</div>
											<div slot="content">
												点击：
												<a href="https://console.upyun.com/services/{空间名称（bucket）}/sourceFile/" target="_blank">https://console.upyun.com/services/{空间名称（bucket）}/sourceFile/</a> 获取 [API 密钥]
											</div>
										</Poptip>
										</Col>
										<Col span="10">
										<FormItem label="保存路径" prop="save_path">
											<Input v-model="settingStatus.upyun.setting.save_path" placeholder="请输入外链域名"></Input>
										</FormItem>
										</Col>
										<Col span="1" style="line-height: 40px;">
										<Poptip content="https://portal.qiniu.com/user/key" placement="right">
											<Icon type="ios-help-outline" size="20"></Icon>
											<div slot="title">七牛云存储 [保存路径]</div>
											<div slot="content">
												如果是根目录请加上 “ / ”,如果是其他目录请加上 “/目录名称/”
											</div>
										</Poptip>
										</Col>
									</Row>

									<Row justify="space-around" type="flex">
										<Col span="12">
										<FormItem label="启用" prop="status">
											<i-switch :disabled="!(settingStatus.upyun.setting.testing && settingStatus.upyun.setting.install)" v-model="settingStatus.upyun.setting.status" size="large" @on-change="upyunStatusChange">
												<span slot="open">开启</span>
												<span slot="close">关闭</span>
											</i-switch>

										</FormItem>
										</Col>
										<Col span="12">
										<FormItem>
											<Button type="primary" icon="paper-airplane" @click="settingSubmit('settingStatus.upyun','upyun')">保存并测试</Button>
										</FormItem>
										</Col>
									</Row>
								</Form>
							</div>
						</div>

					</div>
				</div>
				</Col>
			</Row>

			<Row justify="space-between" type="flex">
				<Col span="11" style="width:49%;" class="spin-col">
				<div class="setting site-list" style="height: 350px;overflow: hidden;">
					<div class="table-title">
						<div class="title">
							OSS (阿里云) 存储
						</div>
						<div class="setting" v-if="settingStatus.oss.setting.testing && settingStatus.oss.setting.install">
							<Poptip confirm placement="bottom-end" title="您确认卸载OSS (阿里云) 存储吗？" width="200" @on-ok="remove('oss')">
								<Icon type="ios-trash-outline" size="25"></Icon>
							</Poptip>
						</div>
					</div>
					<div class="line">
						<Spin fix v-if="settingStatus.oss.loding">
							<Icon type="load-c" size=18 class="spin-icon-load"></Icon>
							<div>Loading</div>
						</Spin>

						<div class="error" style="padding-top: 80px;" v-if="!settingStatus.oss.install">
							<Spin style="color:#5c6b77;">
								<Icon type="ios-information-outline" size="40"></Icon>
								<div style="padding:15px 0;font-size:15px;">你当前还没有安装OSS (阿里云) 存储，请先安装！</div>
								<div>
									<Button type="dashed" :loading="settingStatus.oss.installing" icon="ios-cloud-outline" @click="install('oss');">
								        <span v-if="!settingStatus.oss.installing">立即安装</span>
								        <span v-else>正在安装OSS (阿里云) 存储</span>
								   </Button>
								</div>
							</Spin>
						</div>
						
						
						<div class="setting-from" style="padding-top:45px;" v-if="settingStatus.oss.install">
							<div class="">
								<Form ref="settingStatus.oss" :model="settingStatus.oss.setting" :rules="oss_ruleValidate" :label-width="90">
									<Row justify="space-around" type="flex">
										<Col span="10">
										<FormItem label="KEY_ID" prop="OSS_ACCESS_KEY_ID">
											<Input type="password" v-model="settingStatus.oss.setting.OSS_ACCESS_KEY_ID" placeholder="请输入ACCESS_KEY_ID"></Input>
										</FormItem>
										</Col>
										<Col span="1" style="line-height: 40px;">
										<Poptip content="https://ak-console.aliyun.com/?#/accesskey" placement="right">
											<Icon type="ios-help-outline" size="20"></Icon>
											<div slot="title">OSS (阿里云) 存储 [ACCESS_KEY_ID]</div>
											<div slot="content">
												点击：<br/>
												<a href="https://ak-console.aliyun.com/?#/accesskey" target="_blank">https://ak-console.aliyun.com/?#/accesskey</a> 获取
											</div>
										</Poptip>
										</Col>
										<Col span="10">
										<FormItem label="SECRET" prop="OSS_ACCESS_KEY_SECRET">
											<Input type="password" v-model="settingStatus.oss.setting.OSS_ACCESS_KEY_SECRET" placeholder="请输入ACCESS_KEY_SECRET"></Input>
										</FormItem>
										</Col>
										<Col span="1" style="line-height: 40px;">
										<Poptip content="https://ak-console.aliyun.com/?#/accesskey" placement="right">
											<Icon type="ios-help-outline" size="20"></Icon>
											<div slot="title">OSS (阿里云) 存储 [ACCESS_KEY_SECRET]</div>
											<div slot="content">
												点击：
												<a href="https://ak-console.aliyun.com/?#/accesskey" target="_blank">https://ak-console.aliyun.com/?#/accesskey</a> 获取
											</div>
										</Poptip>
										</Col>
									</Row>

									<Row justify="space-around" type="flex">
										<Col span="10">
										<FormItem label="ENDPOINT" prop="OSS_ENDPOINT">
											<Input v-model="settingStatus.oss.setting.OSS_ENDPOINT" placeholder="请输入ENDPOINT"></Input>
										</FormItem>
										</Col>
										<Col span="1" style="line-height: 40px;">
										<Poptip content="ENDPOINT" placement="right">
											<Icon type="ios-help-outline" size="20"></Icon>
											<div slot="title">OSS (阿里云) 存储 [ENDPOINT]</div>
											<div slot="content">
												您的OSS数据中心上传域名，<br />例如：http://oss-cn-hangzhou.aliyuncs.com
											</div>
										</Poptip>
										</Col>
										<Col span="10">
										<FormItem label="BUCKET" prop="OSS_BUCKET">
											<Input v-model="settingStatus.oss.setting.OSS_BUCKET" placeholder="请输入BUCKET"></Input>
										</FormItem>
										</Col>
										<Col span="1" style="line-height: 40px;">
										<Poptip content="https://oss.console.aliyun.com/overview" placement="right">
											<Icon type="ios-help-outline" size="20"></Icon>
											<div slot="title">OSS (阿里云) 存储 [BUCKET]</div>
											<div slot="content">
												点击：
												<a href="https://oss.console.aliyun.com/overview" target="_blank">https://oss.console.aliyun.com/overview</a> 获取
												
											</div>
										</Poptip>
										</Col>
									</Row>
									

									<Row justify="space-around" type="flex">
										<Col span="10">
										<FormItem label="访问域名" prop="apiUri">
											<Input v-model="settingStatus.oss.setting.apiUri" placeholder="请输入访问域名"></Input>
										</FormItem>
										</Col>
										<Col span="1" style="line-height: 40px;">
										<Poptip content="访问域名" placement="right">
											<Icon type="ios-help-outline" size="20"></Icon>
											<div slot="title">OSS (阿里云) 存储 [访问域名]</div>
											<div slot="content">
												您选定的OSS数据中心访问域名，<br />例如：http://oss-cn-hangzhou.aliyuncs.com
											</div>
										</Poptip>
										</Col>
										<Col span="10">
										<FormItem label="BUCKET" prop="OSS_BUCKET">
											<Input v-model="settingStatus.oss.setting.OSS_BUCKET" placeholder="请输入BUCKET"></Input>
										</FormItem>
										</Col>
										<Col span="1" style="line-height: 40px;">
										<Poptip content="https://oss.console.aliyun.com/overview" placement="right">
											<Icon type="ios-help-outline" size="20"></Icon>
											<div slot="title">OSS (阿里云) 存储 [BUCKET]</div>
											<div slot="content">
												点击：
												<a href="https://oss.console.aliyun.com/overview" target="_blank">https://oss.console.aliyun.com/overview</a> 获取
												
											</div>
										</Poptip>
										</Col>
									</Row>



									<Row justify="space-around" type="flex">
										<Col span="12">
										<FormItem label="启用" prop="status">
											<i-switch :disabled="!(settingStatus.oss.setting.testing && settingStatus.oss.setting.install)" v-model="settingStatus.oss.setting.status" size="large" @on-change="ossStatusChange">
												<span slot="open">开启</span>
												<span slot="close">关闭</span>
											</i-switch>

										</FormItem>
										</Col>
										<Col span="12">
										<FormItem>
											<Button type="primary" icon="paper-airplane" @click="settingSubmit('settingStatus.oss','oss')">保存并测试</Button>
										</FormItem>
										</Col>
									</Row>
								</Form>
							</div>
						</div>



					</div>
				</div>
				</Col>
				<Col span="11" style="width:49%;" class="spin-col">
				<div class="setting site-list" style="height: 350px;overflow: hidden;">
					<div class="table-title">
						<div class="title">
							COS (腾讯云) 存储
						</div>
						<div class="setting" v-if="settingStatus.cos.setting.testing && settingStatus.cos.setting.install">
							<Poptip confirm placement="bottom-end" title="您确认卸载COS (腾讯云) 存储吗？" width="200" @on-ok="remove('oss')">
								<Icon type="ios-trash-outline" size="25"></Icon>
							</Poptip>
						</div>
					</div>
					<div class="line">
						<Spin fix v-if="settingStatus.cos.loding">
							<Icon type="load-c" size=18 class="spin-icon-load"></Icon>
							<div>Loading</div>
						</Spin>

						<div class="error" style="padding-top: 80px;" v-if="!settingStatus.cos.install">
							<Spin style="color:#5c6b77;">
								<Icon type="ios-information-outline" size="40"></Icon>
								<div style="padding:15px 0;font-size:15px;">你当前还没有安装COS (腾讯云) 存储，请先安装！</div>
								<div>
									<Button type="dashed" :loading="settingStatus.cos.installing" icon="ios-cloud-outline" @click="install('cos');">
								        <span v-if="!settingStatus.cos.installing">立即安装</span>
								        <span v-else>正在安装COS (腾讯云) 存储</span>
								   </Button>
								</div>
							</Spin>
						</div>
						
						
						<div class="setting-from" style="padding-top:45px;" v-if="settingStatus.cos.install">
							<div class="">

								<Form ref="settingStatus.upyun" :model="settingStatus.upyun.setting" :rules="upyun_ruleValidate" :label-width="90">
									<Row justify="space-around" type="flex">
										<Col span="10">
										<FormItem label="操作员名称" prop="OperatorName">
											<Input type="password" v-model="settingStatus.upyun.setting.OperatorName" placeholder="请输入操作员名称"></Input>
										</FormItem>
										</Col>
										<Col span="1" style="line-height: 40px;">
										<Poptip content="https://console.upyun.com/services/{空间名称（bucket）}/sourceFile/" placement="right">
											<Icon type="ios-help-outline" size="20"></Icon>
											<div slot="title">又拍云存储 [OperatorName]</div>
											<div slot="content">
												点击：<br/>
												<a href="https://console.upyun.com/services/{空间名称（bucket）}/sourceFile/" target="_blank">https://console.upyun.com/services/{空间名称（bucket）}/sourceFile/</a> 后，<br/>下方有一个“操作员授权”栏目，选择一个操作员
											</div>
										</Poptip>
										</Col>
										<Col span="10">
										<FormItem label="操作员密码" prop="OperatorPwd">
											<Input type="password" v-model="settingStatus.upyun.setting.OperatorPwd" placeholder="请输入操作员密码"></Input>
										</FormItem>
										</Col>
										<Col span="1" style="line-height: 40px;">
										<Poptip content="https://console.upyun.com/account/operators/" placement="right">
											<Icon type="ios-help-outline" size="20"></Icon>
											<div slot="title">又拍云存储 [OperatorPwd]</div>
											<div slot="content">
												点击：
												<a href="https://console.upyun.com/account/operators/" target="_blank">https://console.upyun.com/account/operators/</a> 获取
											</div>
										</Poptip>
										</Col>
									</Row>

									<Row justify="space-around" type="flex">
										<Col span="10">
										<FormItem label="空间名称" prop="ServiceName">
											<Input v-model="settingStatus.upyun.setting.ServiceName" placeholder="请输入空间名称（bucket）"></Input>
										</FormItem>
										</Col>
										<Col span="1" style="line-height: 40px;">
										<Poptip content="https://console.upyun.com/services/file/" placement="right">
											<Icon type="ios-help-outline" size="20"></Icon>
											<div slot="title">又拍云存储 [bucketName]</div>
											<div slot="content">
												点击：
												<a href="https://console.upyun.com/services/file/" target="_blank">https://console.upyun.com/services/file/</a> 获取
											</div>
										</Poptip>
										</Col>
										<Col span="10">
										<FormItem label="外链域名" prop="apiUri">
											<Input v-model="settingStatus.upyun.setting.apiUri" placeholder="请输入外链域名"></Input>
										</FormItem>
										</Col>
										<Col span="1" style="line-height: 40px;">
										<Poptip content="https://portal.qiniu.com/user/key" placement="right">
											<Icon type="ios-help-outline" size="20"></Icon>
											<div slot="title">七牛云存储 [外链域名]</div>
											<div slot="content">
												请输入你绑定的加速域名！<br /> 请注意！
												<br/>请加上协议：http:// or https://,<br/>并且末尾要加 " / "
											</div>
										</Poptip>
										</Col>
									</Row>

									<Row justify="space-around" type="flex">
										<Col span="10">
										<FormItem label="api_key" prop="api_key">
											<Input type="password" v-model="settingStatus.upyun.setting.api_key" placeholder="请输入api_key"></Input>
										</FormItem>
										</Col>
										<Col span="1" style="line-height: 40px;">
										<Poptip content="https://portal.qiniu.com/user/key" placement="right">
											<Icon type="ios-help-outline" size="20"></Icon>
											<div slot="title">七牛云存储 [bucketName]</div>
											<div slot="content">
												点击：
												<a href="https://console.upyun.com/services/{空间名称（bucket）}/sourceFile/" target="_blank">https://console.upyun.com/services/{空间名称（bucket）}/sourceFile/</a> 获取 [API 密钥]
											</div>
										</Poptip>
										</Col>
										<Col span="10">
										<FormItem label="保存路径" prop="save_path">
											<Input v-model="settingStatus.upyun.setting.save_path" placeholder="请输入外链域名"></Input>
										</FormItem>
										</Col>
										<Col span="1" style="line-height: 40px;">
										<Poptip content="https://portal.qiniu.com/user/key" placement="right">
											<Icon type="ios-help-outline" size="20"></Icon>
											<div slot="title">七牛云存储 [保存路径]</div>
											<div slot="content">
												如果是根目录请加上 “ / ”,如果是其他目录请加上 “/目录名称/”
											</div>
										</Poptip>
										</Col>
									</Row>

									<Row justify="space-around" type="flex">
										<Col span="10">
										<FormItem label="访问域名" prop="apiUri">
											<Input type="password" v-model="settingStatus.upyun.setting.apiUri" placeholder="请输入访问域名"></Input>
										</FormItem>
										</Col>
										<Col span="1" style="line-height: 40px;">
										<Poptip content="https://portal.qiniu.com/user/key" placement="right">
											<Icon type="ios-help-outline" size="20"></Icon>
											<div slot="title">七牛云存储 [bucketName]</div>
											<div slot="content">
												点击：
												<a href="https://console.upyun.com/services/{空间名称（bucket）}/sourceFile/" target="_blank">https://console.upyun.com/services/{空间名称（bucket）}/sourceFile/</a> 获取 [API 密钥]
											</div>
										</Poptip>
										</Col>
										<Col span="10">
										<FormItem label="保存路径" prop="save_path">
											<Input v-model="settingStatus.upyun.setting.save_path" placeholder="请输入外链域名"></Input>
										</FormItem>
										</Col>
										<Col span="1" style="line-height: 40px;">
										<Poptip content="https://portal.qiniu.com/user/key" placement="right">
											<Icon type="ios-help-outline" size="20"></Icon>
											<div slot="title">七牛云存储 [保存路径]</div>
											<div slot="content">
												如果是根目录请加上 “ / ”,如果是其他目录请加上 “/目录名称/”
											</div>
										</Poptip>
										</Col>
									</Row>

									<Row justify="space-around" type="flex">
										<Col span="12">
										<FormItem label="启用" prop="status">
											<i-switch :disabled="!(settingStatus.upyun.setting.testing && settingStatus.upyun.setting.install)" v-model="settingStatus.upyun.setting.status" size="large" @on-change="upyunStatusChange">
												<span slot="open">开启</span>
												<span slot="close">关闭</span>
											</i-switch>

										</FormItem>
										</Col>
										<Col span="12">
										<FormItem>
											<Button type="primary" icon="paper-airplane" @click="settingSubmit('settingStatus.upyun','upyun')">保存并测试</Button>
										</FormItem>
										</Col>
									</Row>
								</Form>
							</div>
						</div>

					</div>
				</div>
				</Col>
			</Row>
			</Col>
			<Col span="5" style="width:19%;">

			<div class="setting site-list" style="height:715px;">
				<div class="table-title">
					<div class="title">
						存储设置
					</div>
				</div>
				<div class="line">
					<!--<Spin fix>
						<Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
						<div>Loading</div>
					</Spin>-->

					<div class="error" style="padding-top: 80px;">
						<Spin style="color:#5c6b77;">
							<Icon type="ios-help-outline" size="40"></Icon>
							<div style="padding:15px 0;font-size:15px;">你当前还没有开启分发存储，是否开启？</div>
							<div>

								<i-switch v-model="storageValidate.is_distribute==1" size="large">
									<span slot="open">开启</span>
									<span slot="close">关闭</span>
								</i-switch>
							</div>
						</Spin>

					</div>
				</div>
			</div>
			</Col>
		</Row>

		<Modal v-model="testModal.open" :closable="false" :mask-closable="false" width="700">
			<div id="">
				<Upload ref="upload" type="drag" :data="testModal.data" cdn :action="testModal.testUploadUrl" :before-upload="handleBeforeUpload" :on-success="UploadTestSuccess" :on-error="UploadTestError">
					<div style="padding:100px 0">
						<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
						<p>点击或将文件拖拽到这里上传</p>
					</div>
				</Upload>

			</div>

			<div slot="footer">
				<Button type="ghost" icon="close-round" @click="testModal.open=false">关 闭</Button>
			</div>
		</Modal>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				settingStatus: {
					qiniu: {
						open: 0,
						install: false,
						loding: true,
						installing: false,
						setting: {
							'accessKey': '',
							'secretKey': '',
							'bucketName': '',
							'apiUri': '',
							'status': false,
							'type': "",
							'testing': false
						}
					},
					upyun: {
						open: 0,
						install: false,
						loding: true,
						installing: false,
						setting: {
							OperatorName: "",
							OperatorPwd: "",
							ServiceName: "",
							apiUri: "",
							api_key: "",
							save_path: ""

						}
					},
					oss: {
						open: 0,
						install: false,
						loding: true,
						installing: false,
						setting: {
							OSS_ACCESS_KEY_ID: "",
							OSS_ACCESS_KEY_SECRET: "",
							OSS_ENDPOINT: "",
							OSS_BUCKET: "",
							apiUri: "",
							api_key: "",
							save_path: ""

						}
					},
					cos: {
						open: 0,
						install: false,
						loding: true,
						installing: false,
						setting: {

						}
					},
					local: {
						open: 0,
						install: false,
						loding: true,
						installing: true,
						setting: {

						}
					},
				},
				installingCount: 0,
				settingConf: [],
				opencount: 0,
				formSubmiting: false,
				Testing_getConf: false,
				testModal: {
					open: false,
					type: "",
					testUploadUrl: "",
					data: {

					}
				},
				storageValidate: {
					storageconf: [],
					is_distribute: 0,
				},
				qiniu_ruleValidate: {
					accessKey: [{
						required: true,
						message: '请输入accessKey',
						trigger: 'blur'
					}],
					secretKey: [{
						required: true,
						message: '请输入secretKey',
						trigger: 'blur'
					}],
					bucketName: [{
						required: true,
						message: '请输入bucketName（空间名称）',
						trigger: 'blur'
					}],
					apiUri: [{
						required: true,
						message: '请输入外链域名',
						trigger: 'blur'
					}],
				},
				upyun_ruleValidate: {
					OperatorName: [{
						required: true,
						message: '请输入操作员名称',
						trigger: 'blur'
					}],
					OperatorPwd: [{
						required: true,
						message: '请输入操作员密码',
						trigger: 'blur'
					}],
					ServiceName: [{
						required: true,
						message: '请输入空间名称',
						trigger: 'blur'
					}],
					apiUri: [{
						required: true,
						message: '请输入外链域名',
						trigger: 'blur'
					}],
					api_key: [{
						required: true,
						message: '请输入api-key',
						trigger: 'blur'
					}],
					save_path: [{
						required: true,
						message: '请输入保存地址',
						trigger: 'blur'
					}],
				},
				oss_ruleValidate: {
					OSS_ACCESS_KEY_ID: [{
						required: true,
						message: '请输入ACCESS_KEY_ID',
						trigger: 'blur'
					}],
					OSS_ACCESS_KEY_SECRET: [{
						required: true,
						message: '请输入ACCESS_KEY_SECRET',
						trigger: 'blur'
					}],
					OSS_ENDPOINT: [{
						required: true,
						message: '请输入ENDPOINT',
						trigger: 'blur'
					}],
					OSS_BUCKET: [{
						required: true,
						message: '请输入空间名称',
						trigger: 'blur'
					}],
					apiUri: [{
						required: true,
						message: '请输入外链域名',
						trigger: 'blur'
					}],
					api_key: [{
						required: true,
						message: '请输入api-key',
						trigger: 'blur'
					}],
					save_path: [{
						required: true,
						message: '请输入保存地址',
						trigger: 'blur'
					}],
				},
				uploadList: []
			}
		},
		created() {
			this.getStorageConfig();
		},
		methods: {
			settingSubmit(name, e) {

				if(this.formSubmiting) {
					return false;
				}
				this.$refs[name].validate((valid) => {
					if(valid) {
						this.formSubmiting = true;
						this.settingStatus[e].setting.type = e;
						this.$ajax.post('setting/storage_conf_save', this.settingStatus[e].setting, {}).then(function(ret) {

							const type_cn = e == "qiniu" ? "七牛云存储" : e == "upyun" ? "又拍云存储" : e == "cos" ? "COS (腾讯云)存储" : e == "oss" ? "OSS (阿里云) 存储" : "本地存储";
							const status_code = parseInt(ret.data.data.save_status);
							if(ret.data.ret == 200 && (status_code == 200 || status_code == 201)) {
								this.$Notice.success({
									title: '[' + type_cn + '] 配置文件保存成功'
								});

								var _postData = {};
								switch(e) {
									case "qiniu":
										_postData = {
											token: ret.data.data.config.token
										}
										break;
									case "upyun":
										this.testModal.testUploadUrl = "";
										_postData = {
											method:'key',
											type:e
										}
										break;
									case "cos":
										break;
									case "oss":
										this.testModal.testUploadUrl = "";
										_postData = {
											method:'key',
											type:e
										}
										break;
									case "local":
										break;
								}

								this.testModal = {
									open: true,
									type: e,
									apiDomain: ret.data.data.config.domain,
									testUploadUrl: this.$config.apiurl+'Commethod/get_uploaduri',
									data: _postData
								}
								//this.getStorageConfig();
							} else {
								this.$Notice.error({
									title: type_cn + '保存失败',
									desc: status_code == 500 ? "配置文件写入失败，请检查/config/目录权限" : status_code == 501 ? "配置信息写入数据库失败" : "保存失败，请检查文件目录"
								});
							}
							this.formSubmiting = false;
						}.bind(this));
					}
				})
			},
			getStorageConfig() {
				this.$ajax.get('setting/storage_list', {}).then(function(ret) {
					if(ret.data.ret != 200) {
						this.$Message.error('获取配置失败');
					} else {
						this.storageValidate.is_distribute = ret.data.data.setting.is_distribute;
						this.storageValidate.storageconf = ret.data.data.setting.type;
						this.settingConf = ret.data.data.conf;
						this.settingConf.forEach(function(e) {
							this.settingStatus[e.name].setting = e;
							this.settingStatus[e.name].install = e.install;
							if(e.status == -1) {
								this.settingStatus[e.name].install = false;
							} else if(e.status == 0) {
								this.settingStatus[e.name].install = true;
							} else if(e.status == 1) {
								this.opencount++;
								this.settingStatus[e.name].install = true;
							}
							this.settingStatus[e.name].loding = false;

						}.bind(this));

					}
				}.bind(this));
			},
			install(type) {
				if(this.settingStatus[type].installing) {
					return false;
				}

				const type_cn = type == "qiniu" ? "七牛云存储" : type == "upyun" ? "又拍云存储" : type == "cos" ? "COS (腾讯云)存储" : type == "oss" ? "OSS (阿里云) 存储" : "本地存储";

				this.installingCount++;
				this.$Message.destroy();
				this.$Message.loading({
					content: '正在安装中...',
					duration: 0
				});
				this.settingStatus[type].installing = true;

				this.$ajax.post('setting/storage_install', {
					type: type
				}).then(function(ret) {
					const status_code = parseInt(ret.data.data.status_code);
					if(ret.data.ret != 200 || status_code != 200) {
						this.$Notice.error({
							title: type_cn + '安装失败',
							desc: status_code == 500 ? "配置文件写入失败，请检查/config/目录权限" : status_code == 501 ? "配置信息写入数据库失败" : "安装失败，请检查文件目录"
						});
					} else {
						this.$Notice.success({
							title: type_cn + '安装成功'
						});
						this.getStorageConfig();
					}
					this.settingStatus[type].installing = false;
					this.installingCount--;
					if(this.installingCount < 1) {
						this.$Message.destroy();
					}
				}.bind(this));

			},
			S4() {
				return(((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
			},
			guid() {
				return(this.S4() + this.S4() + "-" + this.S4() + "-" + this.S4() + "-" + this.S4() + "-" + this.S4() + this.S4() + this.S4());
			},
			handleBeforeUpload(file) {
				this.file = file;
				let filename = this.guid() + encodeURI(file.name);
				let e = this.testModal.type;
				switch(e) {
					case "qiniu":
						this.testModal.data.key = filename;
						return true;
						break;
					case "upyun":
					
					return true;
						break;
					case "qiniu":

						break;
					case "qiniu":

						break;
				}
			},
			UploadTestError(res, file) {
				this.$Notice.error({
					title: '测试上传失败',
					desc: "请检查你的配置"
				});

			},
			CdnStatusChange (type,val){
				const type_cn = type == "qiniu" ? "七牛云存储" : type == "upyun" ? "又拍云存储" : type == "cos" ? "COS (腾讯云)存储" : type == "oss" ? "OSS (阿里云) 存储" : "本地存储";				
				this.$ajax.post('setting/storage_SetStatus', {
					type: type,
					status:val
				}).then(function(ret) {
					console.log(type_cn);
					let status_cn = val==1?'启用':"关闭";
					const status_code = parseInt(ret.data.data.status_code);
					if(ret.data.ret == 200 && (status_code == 200 || status_code == 201)) {
						this.$Message.success(type_cn + status_cn + '成功');
					} else {
						this.$Message.error(type_cn + status_cn + '失败');
					}
					this.getStorageConfig();
				}.bind(this));
				
				
			},
			qiniuStatusChange(status){
				let val = status==true?1:0;
				this.CdnStatusChange("qiniu",val);
			},
			upyunStatusChange(status){
				let val = status?1:0;
				this.CdnStatusChange("upyun",val);
			},
			cosStatusChange(status){
				let val = status?1:0;
				this.CdnStatusChange("cos",val);
			},
			ossStatusChange(status){
				let val = status?1:0;
				this.CdnStatusChange("oss",val);
			},
			localStatusChange(status){
				let val = status?1:0;
				this.CdnStatusChange("local",val);
			},
			UploadTestSuccess(res, file) {
				file.url = this.testModal.apiDomain + res.key;
				file.name = file.name;
				this.UploadTestUpdateStatus();
			},
			UploadTestUpdateStatus() {
				this.$ajax.post('setting/storage_testing_success', {
					type: this.testModal.type
				}).then(function(ret) {
					const save_status = parseInt(ret.data.data.save_status);
					if(ret.data.ret == 200 && (save_status == 200 || save_status == 201)) {
						this.$Notice.success({
							title: '测试上传成功',
						});

						this.getStorageConfig();

						this.testModal = {
							open: false,
							type: "",
							apiDomain: "",
							testUploadUrl: "",
							data: {}
						}

					} else {
						this.$Notice.error({
							title: '测试上传成功但保存配置失败',
							desc: "请检查/config/目录权限"
						});
					}
				}.bind(this));

			},
			remove(type) {
				this.$Message.loading({
					content: '正在卸载中...',
					duration: 0
				});
				let e = type;
				const type_cn = e == "qiniu" ? "七牛云存储" : e == "upyun" ? "又拍云存储" : e == "cos" ? "COS (腾讯云)存储" : e == "oss" ? "OSS (阿里云) 存储" : "本地存储";

				this.$ajax.post('setting/storage_uinstall', {
					type: type
				}).then(function(ret) {
					this.$Message.destroy();
					if(ret.data.ret != 200 || ret.data.data.status_code != 200) {
						this.$Notice.error({
							title: type_cn + '卸载失败'
						});
					} else {
						this.settingStatus[e] = {
							open: 0,
							install: false,
							loding: false,
							installing: false,
							setting: {
								'accessKey': '',
								'secretKey': '',
								'bucketName': '',
								'apiUri': '',
								'status': false,
								'type': "",
								'testing': false
							}
						};
						this.$Message.success({
							content: '卸载成功'
						});
					}
				}.bind(this));
			}
		},
		mounted() {
			this.uploadList = this.$refs.upload.fileList;
		}
	}
</script>